﻿<div ng-init="init();" class="kmi-layout-content B1402-content">
    <div ng-init="init();" class="kmi-layout-content B1402-content">
        <div class="kmi-header-row">
            <div class="kmi-side-btn left" ng-click="back();">
                <i class="material-icons">&#xE408;</i>
                <div class="kmi-can-click"></div>
            </div>
            <div class="brand-title">
                <div class="custom" ng-if="companyName">
                    <div class="title" ng-bind="companyName"></div>
                    <img src="" alt="" class="brand">
                    <div class="gap"></div>
                </div>
                <div class="digiwin">
                    <img src="image/smes_v340/logo_ch.png" alt="">
                    <img src="image/smes_v340/logo_en.png" alt="">
                </div>
            </div>
            <div class="header-title" ng-bind="'B1402.title' | translate"></div>
            <div class="header-logo"></div>
        </div>
        <div class="kmi-layout-main-content" style="width: 100%;">
            <div class="kmi-layout-page">
                <div style="display: flex;flex-direction: row;position: relative;">
                    <div style="flex:1;">
                        <div class="kmi-text-fields">
                            <label class="label" style="width: 100px;" ng-bind="'B1402.queryList.start_time' | translate"></label>
                            <input mdl-datepicker="conditions.pack_date_start" mdl-date-max="conditions.pack_date_end"/>
                        </div>
                        <div class="kmi-text-fields">
                            <label class="label" style="width: 100px;" ng-bind="'B1402.queryList.area_no' | translate"></label>
                            <input ng-model="conditions.area_no" />
                            <div class="tip search" ng-click="loadAreaNo();"><img src="image/icons/search.png"></img> </div>
                        </div>
                        <div class="kmi-text-fields">
                            <label class="label" style="width: 100px;" ng-bind="'B1402.queryList.product_no' | translate"></label>
                            <input ng-model="conditions.product_no" />
                            <div class="tip search" ng-click="loadProductNo();"><img src="image/icons/search.png"></img> </div>
                        </div>
                        <div class="kmi-text-fields">
                            <label class="label" style="width: 100px;" ng-bind="'B1402.queryList.box_no' | translate"></label>
                            <input ng-model="conditions.box_no"/>
                            <div class="tip qrcode" ng-click="qrcode_box_no();">
                                <img src="image/icons/QRCode.png">
                            </div>
                        </div>
                    </div>
                    <div style="flex:1;">
                        <div class="kmi-text-fields">
                            <label class="label" style="width: 30px; padding-right: 20px;" ng-bind="'B1402.queryList.end_time' | translate"></label>
                            <input mdl-datepicker="conditions.pack_date_end" mdl-date-min="conditions.pack_date_start"/>
                        </div>
                        <div class="kmi-text-fields"></div>
                        <div class="kmi-text-fields"></div>
                        <div class="kmi-text-fields" >
                            <label class="label" style="width: 50px;" ng-bind="'B1402.queryList.input_no' | translate"></label>
                            <input ng-model="conditions.input_no"/>
                            <div class="tip qrcode" ng-click="qrcode_input_no();">
                                <img src="image/icons/QRCode.png">
                            </div>
                        </div>

                    </div>
                    <div style="flex:1;">
                        <div class="kmi-text-fields">
                            <label class="label" style="width: 80px;" ng-bind="'B1402.queryList.user_no' | translate"></label>
                            <input ng-model="conditions.pack_user" />
                            <div class="tip search" ng-click="loadUserNo();"><img src="image/icons/search.png"></img> </div>
                        </div>
                        <div class="kmi-text-fields">
                            <label class="label" style="width: 80px;" ng-bind="'B1402.queryList.op_no' | translate"></label>
                            <input ng-model="conditions.op_no" />
                            <div class="tip search" ng-click="loadOpNo();"><img src="image/icons/search.png"></img> </div>
                        </div>
                    </div>
                    <div style="flex:0.3;">
                        <div class="kmi-text-fields">
                        </div>
                        <div class="kmi-text-fields">
                        </div>
                        <div class="kmi-text-fields">
                        </div>
                        <div class="kmi-button kmi-button-confrim" ng-click="search()" style="flex:1;margin-top:-2px;">
                            <label ng-bind="'B1402.btn.search' | translate"></label>
                            <div class="kmi-can-click"></div>
                        </div>
                    </div>
                </div>

                <div class="kmi-list column-selector">
                    <div class="kmi-list__header">
                        <!-- 20230313 modify by Alan for M#129881: -->
                        <div class="kmi-list__column width-fixed" style="flex:0 0 40px">
                            <button class="mdl-button mdl-js-button mdl-button--icon" ng-click="selectAllBoxes();">
                                <img ng-if="!selectAll" src="image/icons/check0.png"></img>
                                <img ng-if="selectAll" src="image/icons/check1.png"></img>
                            </button>
                        </div>
                        <div class="kmi-list__column" style="flex:1; text-align: center;" ng-bind="'B14.showDetail.title' | translate"></div>
                        <div class="kmi-list__column" style="flex:1; text-align: center;" ng-bind="'B1402.list.pack_date' | translate"></div>
                        <div class="kmi-list__column" style="flex:1; text-align: center;" ng-bind="'B1402.list.box_no' | translate"></div>
                        <div class="kmi-list__column" style="flex:1; text-align: center;" ng-bind="'B1402.list.product_no' | translate"></div>
                        <div class="kmi-list__column" style="flex:1; text-align: center;" ng-bind="'B1402.list.product_version' | translate"></div>
                        <div class="kmi-list__column" style="flex:1; text-align: center;" ng-bind="'B1402.list.product_name' | translate"></div>
                        <div class="kmi-list__column" style="flex:1; text-align: center;" ng-bind="'B1402.list.item_spec' | translate"></div>
                        <div class="kmi-list__column" style="flex:1; text-align: center;" ng-bind="'B1402.list.box_qty' | translate"></div>
                        <div class="kmi-list__column" style="flex:1; text-align: center;" ng-bind="'B1402.list.actual_qty' | translate"></div>
                        <div class="kmi-list__column" style="flex:1; text-align: center;" ng-bind="'B1402.list.box_level' | translate"></div>
                        <div class="kmi-list__column" style="flex:1; text-align: center;" ng-bind="'B1402.list.group_label_no' | translate"></div>
                        <div class="kmi-list__column" style="flex:1; text-align: center;" ng-bind="'B1402.list.pack_user' | translate"></div>
                        <div class="kmi-list__column" style="flex:1; text-align: center;" ng-bind="'B1402.list.end_level' | translate"></div>
                        <div class="kmi-list__column" style="flex:1; text-align: center;" ng-bind="'B1402.list.print_times' | translate"></div>
                    </div>
                    <div class="kmi-list__row-content">
                        <div class="kmi-list__row" ng-repeat="item in getPages(datalist, PageConfig, filterItem) track by $index">
                            <div class="kmi-list__column column-border" style="flex:0 0 40px;">
                                <button class="mdl-button mdl-js-button mdl-button--icon" ng-click="selectBox($event,item);">
                                    <img ng-if="!item.isSelect" src="image/icons/check0.png"></img>
                                    <img ng-if="item.isSelect" src="image/icons/check1.png"></img>
                                </button>
                            </div>
                            <div class="kmi-list__column" style="z-index:1;display: flex;padding-left: 18px;">
                                <button class="mdl-button mdl-js-button mdl-button--icon kmi-button--icon" style="color:#1ab7ce;" ng-click="showDetail(item);">
                                    <i class="material-icons" style="color: #FFB037;">&#xE85A;</i>
                                </button>
                            </div>
                            <div class="kmi-list__column  column-border" style="flex:1; text-align: center;" ng-bind="item.pack_date"></div>
                            <div class="kmi-list__column  column-border" style="flex:1; text-align: center;" ng-bind="item.box_no"></div>
                            <div class="kmi-list__column  column-border" style="flex:1; text-align: center;" ng-bind="item.product_no"></div>
                            <div class="kmi-list__column  column-border" style="flex:1; text-align: center;" ng-bind="item.product_version"></div>
                            <div class="kmi-list__column  column-border" style="flex:1; text-align: center;" ng-bind="item.product_name"></div>
                            <div class="kmi-list__column  column-border" style="flex:1; text-align: center;" ng-bind="item.item_spec"></div>
                            <div class="kmi-list__column  column-border" style="flex:1; text-align: center;" ng-bind="item.box_qty"></div>
                            <div class="kmi-list__column  column-border" style="flex:1; text-align: center;" ng-bind="item.actual_qty"></div>
                            <div class="kmi-list__column  column-border" style="flex:1; text-align: center;" ng-bind="item.box_level"></div>
                            <div class="kmi-list__column  column-border" style="flex:1; text-align: center;" ng-bind="item.group_label_no"></div>
                            <div class="kmi-list__column  column-border" style="flex:1; text-align: center;" ng-bind="item.pack_user"></div>
                            <div class="kmi-list__column  column-border" style="flex:1; text-align: center;" ng-bind="item.end_level"></div>
                            <div class="kmi-list__column  column-border" style="flex:1; text-align: center;" ng-bind="item.print_times"></div>
                            
                        </div>
                    </div>
                </div>
                <div class="page-content">
                    <div class="page-icon">
                        <img src="image/icons/dropleft.png"></img>
                        <div class="kmi-can-click" ng-click="PageConfig.page = (PageConfig.page-1<0?0:PageConfig.page-1);"></div>
                    </div>
                    <label ng-bind="(PageConfig.page +1)+' / '+PageConfig.total_page"></label>
                    <div class="page-icon">
                        <img src="image/icons/dropright.png"></img>
                        <div class="kmi-can-click" ng-click="PageConfig.page = (PageConfig.page+1>(PageConfig.total_page-1)?(PageConfig.total_page-1):PageConfig.page+1);"></div>
                    </div>
                </div>
                <div class="kmi-layout-footer" style="flex-direction: row; align-items: center;">
                    <button class="mdl-button mdl-js-button mdl-button--fab mdl-shadow--custom mdl-button--custom1" ng-click="print();">
                        <img src="image/icons/print.png"></img>
                    </button>
                </div>
            </div>

        </div>

    </div>

</div>